
<template>
  <div class="pre-archive-detail">
    <el-dialog
      width="70%"
      class="WholeScroll"
      :visible.sync="formShow"
      @close="handleClickDeal('cancel')"
      v-dialog-drag
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <span slot="title">
        <span>{{ title }}</span>
      </span>
      <div class="WholeScroll" style="max-height: 650px; overflow: auto;padding: 0 15px;">
        <cmsDetailRowFile :tableFileList="formBaseData.scFileTemp" :showTable="showRowTable"></cmsDetailRowFile>
        <el-form
          :model="formBaseData"
          ref="formBaseData"
          :rules="formBaseRules"
        >
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">

              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="选择标段/合同段"
                    prop="sectionId"
                    :label-width="formlabelWidth"
                  >
                    <el-select
                      style="width:100%"
                      v-model="formBaseData.sectionId"
                      placeholder="请选择项目"
                      :disabled="detailType === 'check'|| detailType === 'approve'"
                      @change="getBeforeNameList"
                    >
                      <el-option
                        v-for="item in contractArr"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="人员变更编号"
                    prop="changeNum"
                    :label-width="formlabelWidth"
                  >
                    <el-input v-model="formBaseData.changeNum"
                              :disabled="detailType === 'check'|| detailType === 'approve'" >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="变更申请理由"
                    prop="reason"
                    :label-width="formlabelWidth"
                  >
                    <el-input
                      style="width: 100%"
                      class="contract-ele-long"
                      v-model="formBaseData.reason"
                      placeholder
                      rows="8"
                      type="textarea"
                      :disabled="(detailType === 'check' || detailType === 'approve')"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <div class="content-box">
                  <div v-for="(item,index) in dataContent" :key="index"  style="width: 49%;padding: 15px;border: 1px solid rgba(111,111,111,0.2)">
                    <div class="flex-align-center">
                      <div class="title-content">
                        <span style="color: red;">*</span>姓名（变更{{index==0?'前':'后'}}）
                      </div>
                      <div class="content">
                        <el-select
                          v-if="index == 0"
                          style="width:100%"
                          v-model="item.person"
                          @change="getBeforeDetail(item.person,'change')"
                          :disabled="detailType === 'check'|| detailType === 'approve'"
                          placeholder="请选择姓名"
                        >
                          <el-option
                            v-for="item in beforeNameList"
                            :key="item.id"
                            :label="item.personName"
                            :value="item.id"
                          >
                          </el-option>
                        </el-select>
                        <el-select
                          v-if="index == 1"
                          style="width:100%"
                          @change="getAfterDetail(item.person)"
                          :disabled="detailType === 'check'|| detailType === 'approve'"
                          v-model="item.person"
                          placeholder="请选择姓名"
                        >
                          <el-option
                            v-for="item in afterNameList"
                            :key="item.id"
                            :label="item.personName"
                            :value="item.id"
                          >
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                    <div class="flex-align-center">
                      <div class="title-content">
                        身份证
                      </div>
                      <div class="content">
                        {{item.idcardNo}}
                      </div>
                    </div>
                    <div class="flex-align-center">
                      <div class="title-content">
                        进场时间
                      </div>
                      <div class="content">
                        {{item.entryDate}}
                      </div>
                    </div>
                    <div class="flex-align-center">
                      <div class="title-content">
                        籍贯
                      </div>
                      <div class="content">
                        {{item.nativePlace}}
                      </div>
                    </div>
                    <div class="flex-align-center">
                      <div class="title-content">
                        学历
                      </div>
                      <div class="content">
                        {{item.eduName}}
                      </div>
                    </div>
                    <div class="flex-align-center">
                      <div class="title-content">
                        部门名称
                      </div>
                      <div class="content">
                        {{item.dept}}
                      </div>
                    </div>
                    <div class="flex-align-center">
                      <div class="title-content">
                        岗位名称
                      </div>
                      <div class="content">
                        {{item.postName}}
                      </div>
                    </div>
                    <div class="flex-align-center">
                      <div class="title-content">
                        人员类型
                      </div>
                      <div class="content">
                        履约人员
                      </div>
                    </div>
                    <div class="table-box">
                      <el-table
                        class="table-seven-blue"
                        :border="true"
                        :header-cell-style="{padding: '0',height:'38px',backgroundColor: '#f2f2f2',textAlign:'center',borderColor: '#d4d4d4'}"
                        :cell-style="{padding: '6px 0',textAlign:'center',borderColor: '#d4d4d4'}"
                        ref="multipleTable"
                        :data="item.certificateInforList"
                        height="300px"
                        style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px;"
                      >
                        <el-table-column
                          show-overflow-tooltip
                          prop="certificateType"
                          label="证书类别"
                          style="text-align: center"
                          width="150">
                          <template slot-scope="scope">
                            <div>{{scope.row.certificateType}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          show-overflow-tooltip
                          prop="certificateNumber"
                          label="证书编号"
                          width="150"
                          style="text-align: left">
                          <template slot-scope="scope">
                            <div>{{scope.row.certificateNumber}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          show-overflow-tooltip
                          prop="level"
                          label="证书级别"
                          width="150"
                          style="text-align: left">
                          <template slot-scope="scope">
                            <div>{{scope.row.level}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          show-overflow-tooltip
                          prop="unit"
                          label="发证单位"
                          width="150"
                          style="text-align: left">
                          <template slot-scope="scope">
                            <div>{{scope.row.unit}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          show-overflow-tooltip
                          prop="grantDate"
                          label="发证时间"
                          width="150"
                          style="text-align: left">
                          <template slot-scope="scope">
                            <div>{{scope.row.grantDate}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          show-overflow-tooltip
                          prop="effectDate"
                          label="有效日期"
                          width="150"
                          style="text-align: left">
                          <template slot-scope="scope">
                            <div>{{scope.row.effectDate}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          show-overflow-tooltip
                          prop="listName"
                          width="230"
                          label="附件"
                          style="text-align: left">
                          <template slot-scope="scope">
                            <div class="flex-row">
                              <div  class="hover-underline-changeBlue"  @click="viewFile(scope.row)">{{scope.row.fileList[0].name}}</div>
                              <el-button size="mini" @click="dlFile(scope.row)">下载</el-button>
                            </div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                    <div class="table-box">
                      <el-table
                        class="table-six-blue"
                        :border="true"
                        :header-cell-style="{padding: '0',height:'38px',backgroundColor: '#f2f2f2',textAlign:'center',borderColor: '#d4d4d4'}"
                        :cell-style="{padding: '6px 0',textAlign:'center',borderColor: '#d4d4d4'}"
                        ref="multipleTable"
                        height="300px"
                        :data="item.workExperienceList"
                        style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px;"
                      >
                        <el-table-column
                          show-overflow-tooltip
                          prop="unit"
                          label="所在公司"
                          style="text-align: center"
                          width="150">
                          <template slot-scope="scope">
                            <div>{{scope.row.unit}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          show-overflow-tooltip
                          prop="post"
                          label="岗位"
                          width="150"
                          style="text-align: left">
                          <template slot-scope="scope">
                            <div>{{scope.row.post}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          show-overflow-tooltip
                          prop="majorProjects"
                          label="参与重大项目"
                          width="150"
                          style="text-align: left">
                          <template slot-scope="scope">
                            <div>{{scope.row.majorProjects}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          show-overflow-tooltip
                          prop="startDate"
                          label="开始时间"
                          width="150"
                          style="text-align: left">
                          <template slot-scope="scope">
                            <div>{{scope.row.startDate}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          show-overflow-tooltip
                          prop="endDate"
                          label="结束日期"
                          width="150"
                          style="text-align: left">
                          <template slot-scope="scope">
                            <div>{{scope.row.endDate}}</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          show-overflow-tooltip
                          prop="listName"
                          label="附件"
                          width="230"
                          style="text-align: left">
                          <template slot-scope="scope">
                            <div class="flex-row">
                              <div  class="hover-underline-changeBlue"  @click="viewFile(scope.row)">{{scope.row.fileList[0].name}}</div>
                              <el-button size="mini" @click="dlFile(scope.row)">下载</el-button>
                            </div>

                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                    <div class="flex-align-center">
                      <div class="title-content">
                        身份证正面
                      </div>
                      <div class="content" v-if="item.sfzFile!=null&&item.peopleFile.length>0">
                        <el-upload
                          class="upload-demo fill span18 small-payment-upload"
                          action
                          list-type="picture-card"
                          :show-file-list="false"
                          :file-list="item.sfzFile[0]"
                          disabled
                          :before-upload="(file)=>uploadPartOne(file)"
                        >
                        </el-upload>
                        <div class="file-list">
                          <ul class="el-upload-list el-upload-list--picture-card" style="display: flex;flex-direction: row">
                            <li v-for="(i, t) in item.sfzFile[0]" :key="t" :tabindex="t" class="el-upload-list__item is-ready flex-hv-center">
                              <div v-if="item.sfzFile[0].length>0">
                                <img :src="i.src" alt="#" class="el-upload-list__item-thumbnail">
                                <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="preview(i)">
                                  <i class="el-icon-zoom-in"></i>
                                </span>
                                <span class="el-upload-list__item-delete" @click="download(i)">
                                  <i class="el-icon-download"></i>
                                </span>
                              </span>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="flex-align-center">
                      <div class="title-content">
                        身份证反面
                      </div>
                      <div class="content" v-if="item.sfzFile != null&&item.sfzFile[1].length>0">
                        <el-upload
                          class="upload-demo fill span18 small-payment-upload"
                          action
                          :show-file-list="false"
                          :file-list="item.sfzFile[1]"
                          list-type="picture-card"
                          disabled
                          :before-upload="(file)=>uploadPartOne(file)"
                        >
                        </el-upload>
                        <div class="file-list">
                          <ul class="el-upload-list el-upload-list--picture-card" style="display: flex;flex-direction: row">
                            <li v-for="(i, t) in item.sfzFile[1]" :key="t" :tabindex="t" class="el-upload-list__item is-ready flex-hv-center">
                              <div v-if="item.sfzFile[1].length>0">
                                <img :src="i.src" alt="#" class="el-upload-list__item-thumbnail">
                                <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="preview(i)">
                                  <i class="el-icon-zoom-in"></i>
                                </span>
                                <span class="el-upload-list__item-delete" @click="download(i)">
                                  <i class="el-icon-download"></i>
                                </span>
                              </span>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-row>
              <el-row style="margin-top: 15px">
                <el-col :span="24">
                  <bpmn-form v-if="detailType!=='check'&&type=='1'" ref="bpmnForm" :multiple="false" proc-def-key="personChangeSgProcess" :formlabelWidth="formlabelWidth" :business-id="formBaseData.id" :url="url" :entity="formBaseData"
                             @complete="onComplete" :needInit="false" :variables="variables"></bpmn-form>
                </el-col>
                <el-col :span="24">
                  <bpmn-form v-if="detailType!=='check'&&type=='2'" ref="bpmnForm" :multiple="false" proc-def-key="personChangeFsgProcess" :formlabelWidth="formlabelWidth" :business-id="formBaseData.id" :url="url" :entity="formBaseData"
                             @complete="onComplete" :needInit="false" :variables="variables"></bpmn-form>
                </el-col>
              </el-row>




            </el-tab-pane>


            <el-tab-pane label="审批记录" v-if="formBaseData.procInstId">
              <wf-process :inst-id="formBaseData.procInstId" :url="urlProcess"/>
            </el-tab-pane>


          </el-tabs>

        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <pop-btn
          ref="btn"
          v-if="detailType!=='check'"
          proc-def-key="ContractPaymentProcess"
          :business-id="formBaseData.id"
          :readonly="readonly"
          :task-id="formBaseData.taskId"
          @save="onSave"
          @approve="onApprove"
          @apply="onApply"
          @cancel="cancel"
        />
        <el-button v-else size="small" @click="cancel">
          <i class="iconfont icon-icon_cancel"></i> 取 消
        </el-button>
      </div>
    </el-dialog>
    <el-dialog  :visible.sync="dialogVisible" append-to-body>
      <div style="max-height: 600px;overflow-y: auto" class="WholeScroll flex-hv-center">
        <img class="fileViewImg" :src="dialogImageUrl" alt="#" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import entryExitRegistration from '@/api/buss/entryExitRegistration'
import personChange from '@/api/buss/personChange'
import msgUtil from '@/utils/msgUtil'
import crudDict  from '@/api/system/dict'
import WfProcess from '@/components/WorkFlow/process/index'
import startMixin from '@/mixins/wfStartMixin'
import approveMixin from '@/mixins/wfApproveMixin'
import PopBtn from '@/components/ExtBpmn/Btn/index'
import BpmnForm from '@/components/ExtBpmn/ExtForm/bpmn-form'
export default {
  name: 'people-change-detail',
  components: {
    WfProcess,
    BpmnForm,
    PopBtn
  },
  mixins: [startMixin, approveMixin],
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {}
      }
    }
  },
  watch: {
    postDetail(value) {
      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      this.activeName = 'first'
      // 详情类型
      this.detailType = value.type
      this.formBaseData.sectionId = value.params.sectionId
      this.formBaseData.projectId = value.params.projectId
      let type = value.params.type
      if(type == 'section'){
        this.type = '1'
      } else {
        this.type = '2'
      }

      this.getPersonType(() =>{
        this.getSectionList()
        if (this.detailType == 'build') {
          this.getBeforeNameList()
        }
      })
      if (this.detailType == 'build') {
        this.title = '履约人员变更'
      } else if (this.detailType == 'check') {
        this.title = '履约人员变更'
      } else if (this.detailType == 'edit') {
        this.title = '履约人员变更'
      } else {
        this.title = ''
      }
      // 详情id
      this.detailId = value.detailId === undefined ? '0' : value.detailId
      if (this.detailType !== 'build') {
        // 获取详情请求
        this.getDetail()
      } else {
        this.$nextTick(()=>{
          this.initProcessData()
        })
      }

    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      oldScore:'',
      contractorManagementId:'',
      companyName:'',
      companyType:'',
      contractTree:[],
      projectTree:[],
      companyTree:[],
      fileList: [],
      fileCancel: [],
      isLoading: false,
      showBpmnForm:true,
      readonly:false,
      detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
      detailId: '', // 当前详情的id
      formShow: false, // 表单展示
      formlabelWidth: '140px', // 表单左侧标题宽度
      title: '',
      activeName: 'first',
      variables:{},
      fileSystem: {
        'one': {
          sys: 'buss',
          module: 'CreditEvaluation',
          part: 'one',
          compoName: 'fileOne'
        }
      },


      selectList: {

        file: []
      }, // 所有下拉框列表的集合
      contractArr:[],
      beforeNameList:[],
      afterNameList:[],
      type:'',
      url :'buss/personchange/node/attribute',
      urlProcess :'buss/personchange/process',
      formBaseData: {
        projectId:'' ,
        sectionId:'',
        beforeChangeId:'',
        afterChangeId:'',
        post:'',
        file:[],
        changeNum:'',
        reason:'',
        taskId:'',
      }, // 表单基本信息内容
      dataContent:[{
        person: '',
        idcardNo: '',
        inDate: '',
        nativePlace:'',
        edu:'',
        deptName:'',
        jobTitle:'',
        peopleType: '',
        tableOne: [{}],
        tableTwo: [{}],
        peopleFile:[[],[]],
        sfzFile:[[],[]],
      },{
        person: '',
        idcardNo: '',
        inDate: '',
        nativePlace:'',
        edu:'',
        deptName:'',
        jobTitle:'',
        peopleType: '',
        tableOne: [{}],
        tableTwo: [{}],
        peopleFile:[[],[]],
        sfzFile:[[],[]],
      }],
      personType:'',
      //存放图片的数组
      fileListArray: [],
      formBaseRules: {
        sectionId: [
          {
            required: true,
            message: '请选择标段/合同段',
            trigger: 'change'
          }
        ],
        changeNum: [
          {
            required: true,
            message: '请填写人员变更编号',
            trigger: 'change'
          }
        ]
        ,reason: [
          {
            required: true,
            message: '请填写变更申请理由',
            trigger: 'change'
          }
        ],score: [
          {
            required: true,
            message: '请填写评价得分',
            trigger: 'change'
          }
        ]


      }, // 表单基本信息验证

    }
  },
  methods: {
    dlFile(e) {
      if(e.fileList.length>0){
        this.$publicUpload.checkFile(e.fileList[0].id,e.fileList[0].name)
      }
    },
    //预览
    viewFile(e) {
      this.$publicUpload.preView(e.fileList[0].id)
        .then(res => {
        })
    },
    preview(file) {
      let that = this
      if (file.src) {
        this.$nextTick(() => {
          this.dialogImageUrl = file.src;
          this.dialogVisible = true;
        })
      } else {
        // const id =  'img_'+ file.id
        // const img = document.getElementById(id)
        // console.log(img)
        this.previewImgURl(file.id)
      }
    },
    uploadPartOne(file) {

    },
      onSave(_, callback) {

      this.handleClickDeal('submit', { flag: 1 }, callback)
    },
    onApprove(params, callback) {
      const dealForm = this.$refs.bpmnForm.getForm()
      if(this.type == '1'){
        this.approveForm.procDefKey = 'ContractPaymentProcess'
      } else {
        this.approveForm.procDefKey = 'ContractPaymentProcess'
      }
      this.approveForm.businessId = this.formBaseData.id
      this.approveForm.procInstId = this.formBaseData.procInstId
      this.approveForm.description = dealForm.description
      this.approveForm.selectAssigneeList = dealForm.selectAssigneeList
      this.formBaseData.beforeChangeId = this.dataContent[0].person
      this.formBaseData.afterChangeId = this.dataContent[1].person
      this.formBaseData.post = this.dataContent[0].post
      this.approveForm.entity = this.formBaseData
      // 覆盖按钮参数
      Object.assign(this.approveForm, params)
      personChange.audit(this.approveForm).then(r => {
        msgUtil.success2('审批成功!')
        this.cancel()
        this.fetchData()
      }).finally(() => {
        callback && callback();
      })
    },
    onApply(_, callback) {//上报
      // this.form.id = this.form
      this.formBaseData.beforeChangeId = this.dataContent[0].person
      this.formBaseData.afterChangeId = this.dataContent[1].person
      this.formBaseData.post = this.dataContent[0].post
      this.startForm.entity =this.formBaseData
      if(this.type == '1'){
        this.startForm.procDefKey = 'personChangeSgProcess'
      } else {
        this.startForm.procDefKey = 'personChangeFsgProcess'
      }
      this.startForm.businessId = this.formBaseData.id
      this.startForm.variables = this.variables
      const dealForm = this.$refs.bpmnForm.getForm()
      this.startForm.selectAssigneeList = dealForm.selectAssigneeList
      if (!dealForm.selectAssigneeList.length) {
        callback && callback();
        msgUtil.error2('请选择处理人!')
        return
      }

      this.$refs['formBaseData'].validate((valid) => {
        if (valid) {
          this.isLoading = true

          personChange.report(this.startForm).then(r => {
            if (r.code == 200) {
              if (r.data) {
                if (this.detailType == 'build') {
                  this.detailId = r.data.businessId
                  // this.saveFiles()
                }

                msgUtil.success2('上报成功!')
              }
            }

            this.fetchData()
            this.cancel()
          }).finally(() => {
            callback && callback();
          })

        } else {
          callback && callback();
        }
      })



    },
    fetchData() {
      this.$emit('reloadList')
      this.formShow = false
    },
    cancel() {
      this.handleClickDeal('cancel')
    },
    onComplete(data) {
      this.wfNode = data
    },
    getPersonType(callback){
      this.personType = ''
      crudDict.getByCode('personnelType').then(res => {
        if (res.code === 200) {
          var data = res.data;
          for (var i in data) {
            if(data[i].name == '履约人员'){
              this.personType = data[i].id;
            }
          }
          if(callback) callback()
        }else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取人员类型失败")
      })
    },
    getBeforeNameList(){
    return   personChange.getChangePerson({
        sectionId:this.formBaseData.sectionId,
        personType:this.personType,
        beforeOrAfter:'1'
      }).then(res => {
        if (res.code === 200) {
          this.beforeNameList = res.data;
          return new Promise(resolve => {
            resolve(res)
          })
        }else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        // msgUtil.error2("获取项目标段树失败")
      })
    },
    getAfterDetail(personId,xxx){
      let arr = []
      this.afterNameList.forEach(item =>{
        if(personId == item.id){
          this.$set(this.dataContent,'1',item)
          this.dataContent[1].person = item.id
        }
      })
      if(this.dataContent[1].hasOwnProperty('peopleFile')&&this.dataContent[1].peopleFile.length>0){

        let obj1 = JSON.parse(JSON.stringify(this.dataContent[1].peopleFile[0]))
        let obj2 = JSON.parse(JSON.stringify(this.dataContent[1].peopleFile[1]))
        obj1.src =  `${process.env.VUE_APP_BASE_API}/file-server/file/download?id=`+obj1.id
        obj2.src =  `${process.env.VUE_APP_BASE_API}/file-server/file/download?id=`+obj2.id


        this.dataContent[1].sfzFile = []
        this.dataContent[1].sfzFile.push([{
          src: obj1.src,
          name: obj1.name,
          size: obj1.size,
          realName: obj1.name,
          ext: '111'
        }])
        this.dataContent[1].sfzFile.push([{
          src: obj2.src,
          name: obj2.name,
          size: obj2.size,
          realName: obj2.name,
          ext: '222'
        }])
        this.$forceUpdate()


        console.log(this.dataContent,'bbbbbbbbbbbbbbbbbb')


      }

    },
    getBeforeDetail(personId,type){
      let arr = []
      if((this.detailType == 'build' || this.detailType == 'edit'|| this.detailType == 'check')){
        if(type == 'change'){
          this.dataContent[1] = {
            name: '',
            idCard: '',
            inDate: '',
            nativePlace:'',
            edu:'',
            deptName:'',
            jobTitle:'',
            peopleType: '',
            tableOne: [{}],
            tableTwo: [{}],
            peopleFile:[[],[]],
            sfzFile:[[],[]],
          }
        }

        this.beforeNameList.forEach(item =>{
          if(personId == item.id){
            this.$set(this.dataContent,'0',item)
            this.dataContent[0].person = item.id
          }
        })
        if(this.dataContent[0].hasOwnProperty('peopleFile')&&this.dataContent[0].peopleFile!=null&&this.dataContent[0].peopleFile.length>0){

          let obj1 = JSON.parse(JSON.stringify(this.dataContent[0].peopleFile[0]))
          let obj2 = JSON.parse(JSON.stringify(this.dataContent[0].peopleFile[1]))
          obj1.src =  `${process.env.VUE_APP_BASE_API}/file-server/file/download?id=`+obj1.id
          obj2.src =  `${process.env.VUE_APP_BASE_API}/file-server/file/download?id=`+obj2.id

          this.dataContent[0].sfzFile = []
          this.dataContent[0].sfzFile.push([{
            src: obj1.src,
            name: obj1.name,
            size: obj1.size,
            realName: obj1.name,
            ext: '111'
          }])
          this.dataContent[0].sfzFile.push([{
            src: obj2.src,
            name: obj2.name,
            size: obj2.size,
            realName: obj2.name,
            ext: '222'
          }])
          this.$forceUpdate()


          console.log(this.dataContent,'bbbbbbbbbbbbbbbbbb')


        }
      }
     return  personChange.getChangePerson({
        sectionId:this.formBaseData.sectionId,
        personType:this.personType,
        post:this.dataContent[0].post,
        beforeChangeId:personId,
        beforeOrAfter:'2'
      }).then(res => {
        if (res.code === 200) {
          this.afterNameList = res.data;
          return new Promise(resolve => {
            resolve(res)
          })
        }else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        // msgUtil.error2("获取项目标段树失败")
      })
    },
    getSectionList(){
      entryExitRegistration.getContractSectList({projectId:this.formBaseData.projectId}).then(res => {
        if (res.code === 200) {
          this.contractArr = res.data;
        }else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        // msgUtil.error2("获取项目标段树失败")
      })
    },
    showRowTable(){
      if(this.detailType == 'check'||this.detailType == 'approve'){
        return  true
      }else {
        return  false
      }
    },
    // 获取详情请求 api
    getDetail() {
      let that = this
      personChange.getOne(this.detailId).then((res) => {
        if (res.code === 200) {

          let data = res.data

          let formBaseData = data
          if(formBaseData.hasOwnProperty('scFile') && formBaseData.scFile != null){
            let obj = JSON.parse(JSON.stringify(formBaseData.scFile))
            obj.fileName =  obj.name
            this.$set(formBaseData,'scFileTemp',[obj])
          }
          console.log(formBaseData,'xxxxxxxxxxxxx')
          // 中间进行处理数据 然后赋值
          this.formBaseData = formBaseData

          this.dataContent = formBaseData.dataContent
          this.dataContent[0].person = this.dataContent[0].id
          this.dataContent[1].person = this.dataContent[1].id
          this.getBeforeNameList().then(()=>{
            this.getBeforeDetail(this.dataContent[0].person,'getDetail').then(()=>{

              this.getAfterDetail(this.dataContent[1].id,'xxxxxxxx')
            })
          })
          if(this.detailType!=='check'){
            if(this.type == '1'){
              const params = {
                businessId: this.formBaseData.id,
                procDefKey: 'personChangeSgProcess',
                url: this.url,
                entity: this.formBaseData,
                variables: this.variables,
              }
              this.$refs.bpmnForm.initNodeAttribute(params);
              this.$refs.btn.getBtnListWithParam(params);

            } else {
              const params = {
                businessId: this.formBaseData.id,
                procDefKey: 'personChangeFsgProcess',
                url: this.url,
                entity: this.formBaseData,
                variables: this.variables,
              }
              this.$refs.bpmnForm.initNodeAttribute(params);
              this.$refs.btn.getBtnListWithParam(params);

            }


          }
          // 文件系统
          // this.loadFiles()

        } else {
          this.$messageError(res.data.message)
        }
      })
        .catch((res) => {
          console.log('请求出现错误', res)
          this.$messageError(this.$route.name + '获取详情请求-请求失败')
        })
    },
    initProcessData(){
      if(this.type == '1'){
        const params = {
          businessId: this.formBaseData.id,
          procDefKey: 'personChangeSgProcess',
          url: this.url,
          entity: this.formBaseData,
          variables: this.variables,
        }
        this.$refs.bpmnForm.initNodeAttribute(params);
        this.$refs.btn.getBtnListWithParam(params);
      } else {
        const params = {
          businessId: this.formBaseData.id,
          procDefKey: 'personChangeFsgProcess',
          url: this.url,
          entity: this.formBaseData,
          variables: this.variables,
        }
        this.$refs.bpmnForm.initNodeAttribute(params);
        this.$refs.btn.getBtnListWithParam(params);
      }

    },
    // 提交详情 提交1/暂存0 新建0/修改1
    submitDetail(type, callback) {
      this.formBaseData.beforeChangeId = this.dataContent[0].person
      this.formBaseData.afterChangeId = this.dataContent[1].person
      this.formBaseData.post = this.dataContent[0].post
      if (this.detailType === 'build') {
        this.isLoading=true
        personChange.submit(this.formBaseData).then(res => {
          if (res.code === 200) {
            this.formShow = false
            this.detailId = res.data.id
            if (callback) callback()
          }else {
            msgUtil.error2(res.data.message)
          }
        }).catch((res) => {
          console.log(res)
        }).finally((response) => {
          this.isLoading = false
        })
      }else{
        this.isLoading=true
        personChange.resubmit(this.formBaseData).then(res => {
          if (res.code === 200) {
            this.formShow = false
            this.detailId = res.data.id
            if (callback) callback()
          }else {
            msgUtil.error2(res.data.message)
          }
        }).catch((res) => {
          console.log(res)
        }).finally((response) => {
          this.isLoading = false
        })
      }
    },

    /**
     * 加载文件
     **/
    loadFiles() {
      this.$nextTick(()=>{
        for (let k in this.fileSystem) {
          let fileProp = this.fileSystem[k]
          this.$refs[fileProp.compoName].init()
        }
      })

    },
    /**
     * 保存文件
     */
    saveFiles() {
      for (let k in this.fileSystem) {
        let fileProp = this.fileSystem[k]
        this.$refs[fileProp.compoName].saveAll(this.detailId)
      }
    },

    // 点击各个流程的按钮事件
    handleClickDeal(type, res) {
      switch (type) {
        // 取消，关闭窗口
        case 'cancel':
          if(this.$refs['formBaseData']){
            this.$refs['formBaseData'].resetFields()
          }
          this.dataContent = [{
          person: '',
          idcardNo: '',
          inDate: '',
          nativePlace:'',
          edu:'',
          deptName:'',
          jobTitle:'',
          peopleType: '',
          tableOne: [{}],
          tableTwo: [{}],
          peopleFile:[{},{}]
        },{
          name: '',
          idCard: '',
          inDate: '',
          nativePlace:'',
          edu:'',
          deptName:'',
          jobTitle:'',
          peopleType: '',
          tableOne: [{}],
          tableTwo: [{}],
          peopleFile:[{},{}]
        }],
          // dataContent:[{
          //   person: '',
          //   idcardNo: '',
          //   inDate: '',
          //   nativePlace:'',
          //   edu:'',
          //   deptName:'',
          //   jobTitle:'',
          //   peopleType: '',
          //   tableOne: [{}],
          //   tableTwo: [{}],
          //   peopleFile:[{},{}]
          // },{
          //   name: '',
          //   idCard: '',
          //   inDate: '',
          //   nativePlace:'',
          //   edu:'',
          //   deptName:'',
          //   jobTitle:'',
          //   peopleType: '',
          //   tableOne: [{}],
          //   tableTwo: [{}],
          //   peopleFile:[{},{}]
          // }],
          // 重置表单验证
          this.formBaseData={
            projectId:'' ,
            sectionId:'',
            beforeChangeId:'',
            afterChangeId:'',
            post:'',
            file:[],
            changeNum:'',
            reason:'',
            taskId:'',
          }
          this.contractorManagementId='',
            this.companyName='',
            this.companyType='',
            this.contractTree=[],
            this.projectTree=[],
            this.companyTree=[],
            // 清空文件
            this.selectList.file = []
          this.fileList = []
          // 关闭弹窗
          this.formShow = false
          break
        // 保存
        case 'submit':
          let flag = res.flag
          // 表单验证
          this.$refs['formBaseData'].validate((valid) => {
            if (valid) {
              // 再验证其他内容
              // 整理文件信息
              this.isLoading = true
              // 提交详情
              this.submitDetail(flag, () => {
                // 绑定文件到表单
                // 绑定文件到表单
                // this.saveFiles()
                this.fileList = []
                this.formShow = false
                this.isLoading = false
                // 传值给父组件刷新列表
                this.$emit('reloadList')
              })
            } else {
              this.isLoading = false
            }
          })
          break

      }
    },


  }
}
</script>

<style scoped lang="scss">
  .contract-ele {
    width: 100%;
  }
  .contract-ele-long {
    //   width: 280px;
    width: 98%;
  }

  .el-input .el-select {
    width: 130px;
  }

  .formTitle {
    font-weight: bold;
    font-size: 16px;
  }

  .hoverTxt {
    color: #008fe0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .articleBox{
    width: 100%;
    height: 600px;
    .title{
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #303133;
      text-align: center;
    }
    .info{
      display: flex;
      justify-content: center;
      margin-top: 20px;
      span{
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #909399;
      }
    }
    .zhaiyao{
      margin-top: 20px;
      // border: 1px solid #999;
      // background-color: rgba(182, 181, 181, 0.2);
      padding: 10px;
      background: #F3F5F8;
      // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.04);
      // border-radius: 5px;
      // font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #606266;
    }
  }
  .peopleCss{
    display: flex;
    flex-wrap: wrap;
    .itembtn{
      background-color: #999;
      padding: 4px 10px;
      margin-right: 10px;
      border: 1px solid rgb(122, 122, 122);
      margin-bottom: 10px;

    }
    .isChoose{
      background-color: rgb(42, 167, 220);
      color: white;
      border: unset
    }
  }
  .fujianBox{
    // margin-top: 160px;
    padding-left: 130px;
  }
  .newcosnt{
    display: flex;
    flex-direction: column;
    .form-conatiner{
      height: 100%;
    }
  }
  .hightbox{
    height: 60px;
  }
  .flex-align-center{
    display: flex;
    flex-direction: row;
    align-items: center;
    .title-content{
      width: 120px;
      margin: 15px 0;
    }
    .content{
      width: calc(100% - 120px);
    }
  }
  .content-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .file-list {
    width: 100% ;
    flex-direction: row;
  }
  .small-payment-upload{
    display: none;
  }
  .flex-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
</style>
